<!--计算属性和侦听器-->
<script setup lang="js">
import { computed, ref, watch, watchEffect } from 'vue'

const styleData = [
  {
    type: 'primary',
    shape: 'square',
  },
  {
    type: 'info',
    shape: 'round',
  },
  {
    type: 'success',
    shape: 'square',
  },
  {
    type: 'warning',
    shape: 'round',
  },
]

const filterRef = ref('round')

function resetSearch() {
  filterRef.value = ""
}

const watchFilter = ref([])
// 初始化为数组数据，满足getFilterData()返回的数组数据类型
const watchEffectFilter = ref([])

function getFilterData(search) {
  return styleData.filter((v) => {
    let filter1 = new RegExp(search, 'i').test(v.type)
    // 正则表达式'i'表示不区分大小写，test()方法测试字符串是否满足正则表达式
    // 若满足test()方法返回true，否则返回false
    let filter2 = new RegExp(search, 'i').test(v.shape)
    return filter1 | filter2
    // filter()函数实现数组过滤，若返回true，则将该数组元素返回
    // filter()函数最终返回满足true条件的数组元素构成的新数组
  })
}

const computedFilter = computed(() => {
  // 自动侦听代码中涉及的响应式变量，立即执行
  return getFilterData(filterRef.value)
})

watch(filterRef, () => {
  // watch侦听器，侦听响应式变量（含计算属性）或者对应的数组，不能监听非响应式变量
  // 需要在watch()中设置被侦听的响应式变量
  watchFilter.value = getFilterData(filterRef.value)
  // watch侦听器默认情况下，组件初始化后首次不执行
  // 添加选项设置，设置immediate:true，会立即执行
})

/*watch(filterRef, () => {
  watchFilter.value = getFilterData(filterRef.value)
}, { immediate: true })*/

watchEffect(() => {
  // 自动侦听代码块中所涉及的响应式变量
  // 立即执行
  watchEffectFilter.value = getFilterData(filterRef.value)
})
</script>

<template>
  <div class="q-pa-6">
    <q-banner class="bg-purple-4 text-white text-center mb-8">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <h3 class="text-xl text-center font-bold mb-4">作业十四 - 计算属性和侦听器</h3>
      <div class="row justify-center gap-4 items-center">
        <q-input
          v-model="filterRef"
          placeholder="type or shape"
          class="col-6"
          :hint="'搜索类型或形状'"
        />
        <q-btn @click="resetSearch" color="negative" rounded-full label="Reset" />
      </div>
    </div>

    <q-card class="q-ma-auto" style="max-width: 600px;">
      <q-card-section>
        <p class="text-lg mb-4"><strong>当前搜索值：</strong>{{ filterRef }}</p>
        <p class="text-lg mb-4"><strong>计算属性过滤结果：</strong>{{ computedFilter }}</p>
        <p class="text-lg mb-4"><strong>watch()过滤结果：</strong>{{ watchFilter }}</p>
        <p class="text-lg"><strong>watchEffect()过滤结果：</strong>{{ watchEffectFilter }}</p>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped>

</style>
